<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>对象解构赋值</title>
</head>

<body>
  <script>
    // ============================== 对象解构 ==============================
    // const username = 'andy'

    const user = {
      username: '小明',
      age: 18
    }
  
    const {username,age} = user
    console.log(username,age)
    
    // 1. 对象解构赋值基本使用
    //    1.1 要求变量名和属性名必须一致
    //    1.2 如果变量名和属性名不一致，则默认为 undefined
    //    1.3 变量名不要和外面的变量名冲突，否则会报错




    // 2. 练习：完成对象解构，并以此打印出值
    const pig = { name: '佩奇', age: 6 }
    const {name,age:pigage} = pig
    console.log(name,pigage)
    

    // 3. 更改解构变量名（重命名）  变量名: 新变量名
    // 注意数组中如果命名冲突不需要重命名，因为数组中是按照下标一一对应的，只需要改名就行了
    const {username:name1,age:age1} = user
    console.log(name1,age1)
    

    // 4. 练习（需求：解构出对象的username 和 age）
    // const arr = [
    //   {
    //     username: '小明',
    //     age: 18
    //   }
    // ]

    // const [{username,age}] = arr
    // console.log(username,age)  //小明 18
    
  </script>
</body>

</html>